﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title></title>
<style type="text/css">
*{
    margin:0;
}
</style>
<script src="JavaScript/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function jData() {};
    jData.prototype.Open = function (Name, Version, Description, size, CallBack) {
        ///<summary>打开/创建数据库上下文对象</summary>
        ///<param name="Name" type="string">数据库名称</param>
        ///<param name="Version" type="string">数据库版本,默认1.0</param>
        ///<param name="Description" type="string">描述</param>
        ///<param name="size" type="number">数据库大小(最大5M:5*1024*1024)</param>
        ///<param name="CallBack" type="function">回调</param>
        ///<returns type="DataBase" >数据库下下文对象</returns>
        return window.openDatabase(Name, Version, Description, size, CallBack(this));
    }
    jData.prototype.executeSql = function (DataBaseContext, SqlString, SqlPramary, SuccessCallBack, ErrorCallBack) {
        ///<summary>打开/创建数据库上下文对象</summary>
        ///<param name="DataBaseContext" type="DataBaseContext">数据库上下文对象(Open)</param>
        ///<param name="SqlString" type="string">Sql语句</param>
        ///<param name="SqlPramary" type="array">参数(?)</param>
        ///<param name="SuccessCallBack" type="function">成功回调</param>
        ///<param name="ErrorCallBack" type="function">错误回调</param>
        ///<returns type="void">用回调</returns>
        DataBaseContext.transaction(function (tran) {
            tran.executeSql(SqlString, SqlPramary, function (tran, SuccessResult) {
                SuccessCallBack(SuccessResult);
            }, function (tran, ErrorResult) {
                ErrorCallBack(ErrorResult);
            });
        }, function (ErrorTran) {
        }, function () {
        });
    }
    function OpenDataBaseCallBack(DataBase) {
    }

    var j = new jData();
    var DataBaseContext = j.Open("TestDataBase", "1.0", "test Db", 2 * 1024 * 1024, OpenDataBaseCallBack);
    function GetAllTableName() {
        document.getElementById("ShowMain").innerHTML = "";
        ShowTableData("sqlite_sequence");
        var SqlStr = "select * from sqlite_sequence order by seq";
        j.executeSql(DataBaseContext, SqlStr, [], function (result) {
            for (var i = 0; i < result.rows.length; i++) {
                ShowTableData(result.rows.item(i).name);
            }
        }, function (Error) {
            fun_ErrorCallBack(Error);
        });
    }
    function ShowTableData(TableName) {
        var SqlStr = "select * from " + TableName;
        j.executeSql(DataBaseContext, SqlStr, [], function (result) {
            if (result.rows.length > 0) {
                var html = "<div style=\"color:blue;\">" + TableName + "</div><table><thead><tr>";
                var firstRow = result.rows.item(0);
                for (var Column in firstRow) {
                    html += "<th>" + Column + "</th>";
                }
                html += "</tr></thead><tbody>";
                for (var i = 0; i < result.rows.length; i++) {
                    var _row = result.rows.item(i);
                    html += "<tr>";
                    for (var val in _row) {
                        html += "<td>" + _row[val] + "</td>";
                    }
                    html += "</tr>";
                }
                html += "</tbody></table>";
                $("#ShowMain").append(html);
            }
        }, function (Error) {
            fun_ErrorCallBack(Error);
        });
    }
    function fun_ErrorCallBack(ErrorMsg) {
        document.getElementById("SpanErrorMsg").innerHTML = ErrorMsg.message;
    }
    window.onload = function () {
        var SqlStr = "drop table Company;";
        j.executeSql(DataBaseContext, SqlStr, [], function (res) { }, function (res) { alert(res.message); });
        SqlStr = "create table Company(id integer primary key autoincrement,CompanyName text,CompanyNo text,RecordStatus text default 'Active');";
        j.executeSql(DataBaseContext, SqlStr, [], function (res) { }, function (res) { alert(res.message); });
        for (var i = 1; i < 10; i++) {
            SqlStr = "insert into Company(CompanyName,CompanyNo) values(?,?);";
            j.executeSql(DataBaseContext, SqlStr, [i.toString() + "Company", "CNO" + i.toString()], function (res) { }, function (res) { alert(res.message); });
        }
        GetAllTableName();
    }
    function btnRunSqlClick() {
        document.getElementById("SpanErrorMsg").innerHTML = "";
        var SqlStr = document.getElementById("textSQLCommand").value;
        if (SqlStr.length == 0) { return; }
        j.executeSql(DataBaseContext, SqlStr, [], function (result) {
            GetAllTableName();
        }, function (Error) {
            fun_ErrorCallBack(Error);
        });
    }
</script>
</head>
<body>
<form id="form1">
<div>
<h1>Web Sql DataBase</h1>
<span>这是html5中的新技术.请用支持html5的浏览器打开</span><br />
<span>Web Sql DataBase支持在本地(不在服务器)的一个数据库,可以用脚本进行读写</span><br />
<span>下面的例子是我在本地创建了一个数据库,创建了Company表.并插入了几条数据</span><br />
<span>你可以在textarea中写相关的SQL来操作这些数据(create,drop,insert,update,delete....)</span><br />
<span>注意:没有数据的表是不会显示出来,你插入一条数据就可以看到这个表</span><br />
</div>
<div>
<textarea id="textSQLCommand" style="width:80%;float:left;" rows="8" cols="80"></textarea>
<input id="btnRunSql" type="button" value="运行" style=" width:15%;height:135px; font-size:xx-large;" onclick="btnRunSqlClick()" />
</div>
<div><span style="color:Red;" id="SpanErrorMsg"></span></div>
<div>
<span>语法堂</span><br />
<span>insert into Company(CompanyName,CompanyNo) values('10Company','CNO10')</span><br />
<span>create table Employee(id integer primary key autoincrement,EmployeeName text,EmployeeNo text,CompanyID integer,EmployeeSex text,EmployeeAge integer,RecordStatus text default 'Acitve')</span><br />
<span>insert into Employee(EmployeeName,EmployeeNo,CompanyID,EmployeeSex,EmployeeAge) values('LiuJu01','EMP01',1,'Boy',23)</span><br />
</div>
<div id="ShowMain"></div>
</form>
</body>
</html>
